<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <!-- jquery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <!-- jquery ui -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/cupertino/jquery-ui.css" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
  <!-- jquery ui selectmenu -->
  <link rel="stylesheet" href="external/ui.selectmenu.css" type="text/css" media="screen"/>
  <script src="external/ui.selectmenu.js" type="text/javascript"></script>
  <!-- jquery ui themeselect -->
  <link rel="stylesheet" href="ui.themeselect.css" type="text/css" media="screen"/>
  <script src="ui.themeselect.js" type="text/javascript"></script>
  <!-- demo -->
  <title>jQuery UI Themeselect widget demo</title>
  <script type="text/javascript">

    $(document).ready(function() {

      /* setup elements */

      $("#accordion").accordion();
      $('#accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
      }).next().hide();
      $('#pseudo-window').draggable({containment:'parent'});
    
      /* display themeselect widget */

      $('<div></div>')
        .attr('style','position:absolute;top:0.3em;right:0.3em')
        .themeselect({
          post:'/asd',
          before:'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/',
          after:'/jquery-ui.css',
          themes:[
            'black-tie',
            'blitzer',
            'cupertino',
            'dark-hive',
            'dot-luv',
            'eggplant',
            'excite-bike',
            'flick',
            'hot-sneaks',
            'humanity',
            'le-frog',
            'mint-choc',
            'overcast',
            'pepper-grinder',
            'redmond',
            'smoothness',
            'south-street',
            'start',
            'sunny',
            'swanky-purse',
            'trontastic',
            'ui-darkness',
            'ui-lightness',
            'vader'
          ],
          current:'cupertino'
        })
        .appendTo('body');
    
    });

  </script>
</head>
<body>
  <h3 style="position:absolute;top:0;right:15em">Switch theme:</h3>
  <h3>Sample jQuery-UI elements:</h3>
  <div id="accordion" style="margin:1em;width:29em">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
    <h3><a href="#">Third header</a></h3>
    <div>Third content</div>
  </div>
  <p class="ui-widget ui-widget-content ui-state-highlight ui-corner-all" style="padding:1em 0.5em;margin:1em;width:28em"><span style="float:left;margin-right:0.3em;" class="ui-icon ui-icon-info"></span>Sample warning message: Ups.</p>
  <p class="ui-widget ui-widget-content ui-state-error ui-corner-all" style="padding:1em 0.5em;margin:1em;width:28em"><span style="float:left;margin-right:0.3em;" class="ui-icon ui-icon-alert"></span>Sample error message: Yay!</p>
  <div id="pseudo-window" style="width:33em">
    <div style="padding:1em;margin-left:1em;margin-top:10px" class="ui-widget-header ui-state-active ui-corner-top">Title</div>
    <div style="padding:1em;margin-left:1em;height:2em" class="ui-widget-content ui-state-default ui-corner-bottom">Drag me around</div>
  </div>
</body>
</html>

